<template>
  <div class="sign">
    <div class="logo"><a href="/"><img alt="Logo" src="/static/image/nav-logo.png"></a></div>
    <div class="main">


      <h4 class="title">
        <div class="normal-title">
          <router-link class="active" to="/login">登录</router-link>
          <b>·</b>
          <router-link class="" id="js-sign-up-btn" to="/register">注册</router-link>
        </div>
      </h4>
      <div class="js-sign-in-container">
        <form action="" id="new_session" method="post">
          <div class="input-prepend restyle js-normal">
            <input id="session_email_or_mobile_number" name="session[email_or_mobile_number]" placeholder="手机号或邮箱"
                   type="text"
                   v-model="username">
            <i class="iconfont ic-user"></i>
          </div>
          <!-- 海外登录登录名输入框 -->

          <div class="input-prepend">
            <input id="session_password" name="password" placeholder="密码" type="password" v-model="password">
            <i class="iconfont ic-password"></i>
          </div>
          <div class="remember-btn">
            <input checked="checked" id="session_remember_me" type="checkbox" v-model="remember_me" value="true">
            <span>记住我</span>
          </div>
          <div class="forget-btn">
            <a class="" data-toggle="dropdown" href="">登录遇到问题?</a>
          </div>
          <button @click="show_captcha" class="sign-in-button" id="sign-in-form-submit-btn" type="button">
            <span id="sign-in-loading"></span>
            登录
          </button>
        </form>
        <!-- 更多登录方式 -->
        <div class="more-sign">
          <h6>社交帐号登录</h6>
          <ul>
            <li class="" id="weibo-link-wrap">
              <a class="weibo" id="weibo-link">
                <i class="iconfont ic-weibo"></i>
              </a>
            </li>
            <li><a class="weixin" href="" id="weixin" target="_blank"><i class="iconfont ic-wechat"></i></a></li>
            <li><a class="qq" href="" id="qq" target="_blank" @click.stop.prevent="qqlogin"><i class="iconfont ic-qq_connect"></i></a></li>
          </ul>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                username: "",
                password: "",
                remember: ""
            }
        },
        methods:{
            qqlogin(){
              this.$axios.get(`${this.$settings.Host}/oauth/qq`).then(response=>{
                  location.href = response.data
              }).catch(
                  error=>{
                      this.$message.error("第三方登录失败")
                  }
              )
            },
            show_captcha(){
             var captcha1 = new TencentCaptcha(this.$settings.TC_captcha.app_id, res=>{
                    // 用户操作验证码成功以后的回调函数，这个函数将会在对象创建以后，在页面那种进行监听用户的操作
                    // res就是用户操作成功以后，验证码服务器返回的内容
                    /**
                   res:
                    appid:   # 验证码的APPID
                    randstr:     # 随机字符串，防止重复
                    ret: 0               # 0表示用户操作成功，2表示用户主动关闭验证码窗口
                    ticket:          # 验证通过以后的票据，提供给python后端，用来验证是否通过的凭证
                    */
                    this.$axios.get(`${this.$settings.Host}/users/captcha/`,{
                        params:{
                          ticket: res.ticket,
                          randstr: res.randstr
                        }
                    }).then(response=>{
                        if(response.data.detail){
                            // 继续进行登录处理
                            this.loginhandler();
                        }
                    }).catch(error=>{
                        this.$message.error("对不起，验证码校验不通过！");
                    });
                });
                captcha1.show(); // 显示验证码
            },
            loginhandler(){
                // 登录处理
                this.$axios.post(`${this.$settings.Host}/users/login/`,{
                  username: this.username,
                  password: this.password,
                }).then(response=>{
                    // 根据remember_me的值来保存登录状态到本地[vuex，本地存储]
                    if(this.remember_me){
                        // 永久存储
                        localStorage.user_token = response.data.token;
                        localStorage.user_id    = response.data.id;
                        localStorage.user_name  = response.data.username;
                        localStorage.user_avatar= response.data.avatar;
                        sessionStorage.removeItem("user_token");
                        sessionStorage.removeItem("user_id");
                        sessionStorage.removeItem("user_name");
                        sessionStorage.removeItem("user_avatar");
                    }else{
                        // 临时存储
                        sessionStorage.user_token = response.data.token;
                        sessionStorage.user_id = response.data.id;
                        sessionStorage.user_name = response.data.username;
                        sessionStorage.user_avatar = response.data.avatar;
                        localStorage.removeItem("user_token");
                        localStorage.removeItem("user_id");
                        localStorage.removeItem("user_name");
                        localStorage.removeItem("user_avatar");
                    }
                    // 页面跳转
                    this.$confirm('是否跳转到个人中心', '登录成功', {
                      confirmButtonText: '个人中心',
                      cancelButtonText: '返回首页',
                      type: 'success'
                    }).then(() => {
                      // 前往个人中心
                      this.$router.push("/users");
                    }).catch(() => {
                      // 返回站点首页
                      this.$router.push("/");
                    });
                }).catch(error=>{
                    this.$message.error("登录失败！");
                    this.username = "";
                    this.password = "";
                });
            }
        }
    }
</script>

<style scoped>
  input {
    outline: none;
  }

  *, :after, :before {
    box-sizing: border-box;
  }

  .sign {
    height: 100%;
    min-height: 750px;
    text-align: center;
    font-size: 14px;
    background-color: #f1f1f1
  }

  .sign:before {
    content: "";
    display: inline-block;
    height: 85%;
    vertical-align: middle
  }

  .sign .disable, .sign .disable-gray {
    opacity: .5;
    pointer-events: none
  }

  .sign .disable-gray {
    background-color: #969696
  }

  .sign .tooltip-error {
    font-size: 14px;
    line-height: 25px;
    white-space: nowrap;
    background: none
  }

  .sign .tooltip-error .tooltip-inner {
    max-width: 280px;
    color: #333;
    border: 1px solid #ea6f5a;
    background-color: #fff
  }

  .sign .tooltip-error .tooltip-inner i {
    position: static;
    margin-right: 5px;
    font-size: 20px;
    color: #ea6f5a;
    vertical-align: middle
  }

  .sign .tooltip-error .tooltip-inner span {
    vertical-align: middle;
    display: inline-block;
    white-space: normal;
    max-width: 230px
  }

  .sign .tooltip-error.right .tooltip-arrow-border {
    border-right-color: #ea6f5a
  }

  .sign .tooltip-error.right .tooltip-arrow-bg {
    left: 2px;
    border-right-color: #fff
  }

  .sign .slide-error {
    position: relative;
    padding: 10px 0;
    border: 1px solid #c8c8c8;
    border-radius: 4px
  }

  .sign .slide-error i {
    position: static !important;
    margin-right: 10px;
    color: #ea6f5a !important;
    vertical-align: middle
  }

  .sign .slide-error span {
    font-size: 15px;
    vertical-align: middle
  }

  .sign .slide-error div {
    margin-top: 10px;
    font-size: 13px
  }

  .sign .slide-error a {
    color: #3194d0
  }

  .sign .js-sign-up-forbidden {
    color: #999;
    padding: 80px 0 100px
  }

  .sign .js-sign-up-container .slide-error {
    border-bottom: none;
    border-radius: 0
  }

  .sign .logo {
    position: absolute;
    top: 56px;
    margin-left: 50px
  }

  .sign .logo img {
    width: 100px
  }

  .sign .main {
    width: 400px;
    margin: 60px auto 0;
    padding: 50px 50px 30px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(0, 0, 0, .1);
    vertical-align: middle;
    display: inline-block
  }

  .sign .reset-title, .sign .title {
    margin: 0 auto 50px;
    padding: 10px;
    font-weight: 400;
    color: #969696
  }

  .sign .reset-title a, .sign .title a {
    padding: 10px;
    color: #969696
  }

  .sign .reset-title a:hover, .sign .title a:hover {
    border-bottom: 2px solid #ea6f5a
  }

  .sign .reset-title .active, .sign .title .active {
    font-weight: 700;
    color: #ea6f5a;
    border-bottom: 2px solid #ea6f5a
  }

  .sign .reset-title b, .sign .title b {
    padding: 10px
  }

  .sign .reset-title {
    color: #333;
    font-weight: 700
  }

  .sign form {
    margin-bottom: 30px
  }

  .sign form .input-prepend {
    position: relative;
    width: 100%
  }

  .sign form .input-prepend input {
    width: 100%;
    height: 50px;
    margin-bottom: 0;
    padding: 4px 12px 4px 35px;
    border: 1px solid #c8c8c8;
    border-radius: 0 0 4px 4px;
    background-color: hsla(0, 0%, 71%, .1);
    vertical-align: middle
  }

  .sign form .input-prepend i {
    position: absolute;
    top: 14px;
    left: 10px;
    font-size: 18px;
    color: #969696
  }

  .sign form .input-prepend span {
    color: #333
  }

  .sign form .input-prepend .ic-show {
    top: 18px;
    left: auto;
    right: 8px;
    font-size: 12px
  }

  .sign form .geetest-placeholder {
    height: 44px;
    border-radius: 4px;
    background-color: hsla(0, 0%, 71%, .1);
    text-align: center;
    line-height: 44px;
    font-size: 14px;
    color: #999
  }

  .sign form .restyle {
    margin-bottom: 0
  }

  .sign form .restyle input {
    border-bottom: none;
    border-radius: 4px 4px 0 0
  }

  .sign form .no-radius input {
    border-radius: 0
  }

  .sign form .slide-security-placeholder {
    height: 32px;
    background-color: hsla(0, 0%, 71%, .1);
    border-radius: 4px
  }

  .sign form .slide-security-placeholder p {
    padding-top: 7px;
    color: #999;
    margin-right: -7px
  }

  .sign .overseas-btn {
    font-size: 14px;
    color: #999
  }

  .sign .overseas-btn:hover {
    color: #2f2f2f
  }

  .sign .remember-btn {
    float: left;
    margin: 15px 0
  }

  .sign .remember-btn span {
    margin-left: 5px;
    font-size: 15px;
    color: #969696;
    vertical-align: middle
  }

  .sign .forget-btn {
    float: right;
    position: relative;
    margin: 15px 0;
    font-size: 14px
  }

  .sign .forget-btn a {
    color: #999
  }

  .sign .forget-btn a:hover {
    color: #333
  }

  .sign .forget-btn .dropdown-menu {
    top: 20px;
    left: auto;
    right: 0;
    border-radius: 4px
  }

  .sign .forget-btn .dropdown-menu a {
    padding: 10px 20px;
    color: #333
  }

  .sign #sign-in-loading {
    position: relative;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-top: -4px;
    margin-right: 2px;
    display: none
  }

  .sign #sign-in-loading:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: transparent
  }

  .sign #sign-in-loading:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border-radius: 10px;
    border: 2px solid #fff;
    border-bottom-color: transparent;
    vertical-align: middle;
    -webkit-animation: rolling .8s infinite linear;
    animation: rolling .8s infinite linear;
    z-index: 1
  }

  .sign .sign-in-button, .sign .sign-up-button {
    margin-top: 20px;
    width: 100%;
    padding: 9px 18px;
    font-size: 18px;
    border: none;
    border-radius: 25px;
    color: #fff;
    background: #42c02e;
    cursor: pointer;
    outline: none;
    display: block;
    clear: both
  }

  .sign .sign-in-button:hover, .sign .sign-up-button:hover {
    background: #3db922
  }

  .sign .sign-in-button {
    background: #3194d0
  }

  .sign .sign-in-button:hover {
    background: #187cb7
  }

  .sign .btn-in-resend, .sign .btn-up-resend {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 100px;
    height: 36px;
    font-size: 13px;
    color: #fff;
    background-color: #42c02e;
    border-radius: 20px;
    line-height: 36px
  }

  .sign .btn-in-resend {
    background-color: #3194d0
  }

  .sign .sign-up-msg {
    margin: 10px 0;
    padding: 0;
    text-align: center;
    font-size: 12px;
    line-height: 20px;
    color: #969696
  }

  .sign .sign-up-msg a, .sign .sign-up-msg a:hover {
    color: #3194d0
  }

  .sign .overseas input {
    padding-left: 110px !important
  }

  .sign .overseas .overseas-number {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 50px;
    font-size: 18px;
    color: #969696;
    border-right: 1px solid #c8c8c8
  }

  .sign .overseas .overseas-number span {
    margin-top: 17px;
    padding-left: 35px;
    text-align: left;
    font-size: 14px;
    display: block
  }

  .sign .overseas .dropdown-menu {
    width: 100%;
    max-height: 285px;
    font-size: 14px;
    border-radius: 0 0 4px 4px;
    overflow-y: auto
  }

  .sign .overseas .dropdown-menu li .nation-code {
    width: 65px;
    display: inline-block
  }

  .sign .overseas .dropdown-menu li a {
    padding: 6px 20px;
    font-size: 14px;
    line-height: 20px
  }

  .sign .overseas .dropdown-menu li a::hover {
    color: #fff;
    background-color: #f5f5f5
  }

  .sign .more-sign {
    margin-top: 50px
  }

  .sign .more-sign h6 {
    position: relative;
    margin: 0 0 10px;
    font-size: 12px;
    color: #b5b5b5
  }

  .sign .more-sign h6:before {
    left: 30px
  }

  .sign .more-sign h6:after, .sign .more-sign h6:before {
    content: "";
    border-top: 1px solid #b5b5b5;
    display: block;
    position: absolute;
    width: 60px;
    top: 5px
  }

  .sign .more-sign h6:after {
    right: 30px
  }

  .sign .more-sign ul {
    margin-bottom: 10px;
    list-style: none
  }

  .sign .more-sign ul li {
    margin: 0 5px;
    display: inline-block
  }

  .sign .more-sign ul a {
    width: 50px;
    height: 50px;
    line-height: 50px;
    display: block
  }

  .sign .more-sign ul i {
    font-size: 28px
  }

  .sign .more-sign .ic-weibo {
    color: #e05244
  }

  .sign .more-sign .ic-wechat {
    color: #00bb29
  }

  .sign .more-sign .ic-qq_connect {
    color: #498ad5
  }

  .sign .more-sign .ic-douban {
    color: #00820f
  }

  .sign .more-sign .ic-more {
    color: #999
  }

  .sign .more-sign .weibo-loading {
    pointer-events: none;
    cursor: pointer;
    position: relative
  }

  .sign .more-sign .weibo-loading:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff
  }

  body.reader-night-mode .sign .more-sign .weibo-loading:after {
    background-color: #3f3f3f
  }

  .sign .more-sign .weibo-loading:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border-radius: 10px;
    border: 2px solid #e05244;
    border-bottom-color: transparent;
    vertical-align: middle;
    -webkit-animation: rolling .8s infinite linear;
    animation: rolling .8s infinite linear;
    z-index: 1
  }

  @keyframes rolling {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg)
    }

    to {
      -webkit-transform: rotate(1turn);
      transform: rotate(1turn)
    }
  }

  @-webkit-keyframes rolling {
    0% {
      -webkit-transform: rotate(0deg)
    }

    to {
      -webkit-transform: rotate(1turn)
    }
  }

  .sign .reset-password-input {
    border-radius: 4px !important
  }

  .sign .return {
    margin-left: -8px;
    color: #969696
  }

  .sign .return:hover {
    color: #333
  }

  .sign .return i {
    margin-right: 5px
  }

  .sign .icheckbox_square-green {
    display: inline-block;
    *display: inline;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    width: 18px;
    height: 18px;
    background: url(/static/image/green.png) no-repeat;
    border: none;
    cursor: pointer;
    background-position: 0 0
  }

  .sign .icheckbox_square-green.hover {
    background-position: -20px 0
  }

  .sign .icheckbox_square-green.checked {
    background-position: -40px 0
  }

  .sign .icheckbox_square-green.disabled {
    background-position: -60px 0;
    cursor: default
  }

  .sign .icheckbox_square-green.checked.disabled {
    background-position: -80px 0
  }


  .geetest_panel_box > * {
    box-sizing: content-box
  }

  @media (max-width: 768px) {
    body {
      min-width: 0
    }

    .sign {
      height: auto;
      min-height: 0;
      background-color: transparent
    }

    .sign .logo {
      display: none
    }

    .sign .main {
      position: absolute;
      left: 50%;
      margin: 0 0 0 -200px;
      box-shadow: none
    }
  }
</style>
